<template>
    <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            :ellipsis="false"
            @select="handleSelect"
    >
        <el-menu-item index="home" class="logo">猿生阅读</el-menu-item>
        <div class="flex-grow"/>
        <el-menu-item-group>
            <el-row>
                <el-col :span="18">
                    <el-input class="search-input" @keydown.enter="search()" v-model="searchValue.key"
                              placeholder="文章关键词"/>
                </el-col>
                <el-col :span="6">
                    <el-button type="danger" @click="search()">搜索</el-button>
                </el-col>
            </el-row>
        </el-menu-item-group>
        <margin-h/>
        <el-sub-menu index="2">
            <template #title>
                <el-text class="user" type="primary">用户</el-text>
            </template>
            <el-menu-item index="info">个人信息</el-menu-item>
            <el-menu-item index="pass">修改密码</el-menu-item>
            <el-menu-item index="logout" @click="userLogout()">退出登录</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="list">
            <el-text class="mx-1" type="info">文章</el-text>
        </el-menu-item>
        <el-menu-item index="look">
            <el-text class="mx-1" type="info">历史</el-text>
        </el-menu-item>
        <el-menu-item index="collect">
            <el-text class="mx-1" type="info">收藏</el-text>
        </el-menu-item>
    </el-menu>
    <el-row style="margin-top: 20px">
        <el-col :span="4"></el-col>
        <el-col :span="16">
            <div class="content">
                <router-view/>
            </div>
        </el-col>
        <el-col :span="4"></el-col>
    </el-row>
</template>

<script setup>
import {ref} from 'vue'
import MarginH from "@/components/MarginH.vue";
import {useRoute, useRouter} from "vue-router";
import {getCollectIdList, getLookIdList} from "@/request/post";
import {logout} from "@/request/user";
import {ElMessage} from "element-plus";

name = "PostView";
const activeIndex = ref('list')
const searchValue = ref({
    key: "",
    collectTag: '0',
    lookTag: '0',
})
const router = useRouter();

const handleSelect = (key, keyPath) => {
    let map = {
        "info": {
            path: "/user",
        },
        "look": {
            path: "/post/look",
            name: "post-look",
            query: {...searchValue.value, lookTag: '1'}
        },
        "collect": {
            path: "/post/collect",
            name: "post-collect",
            query: {...searchValue.value, collectTag: '1'}
        },
        "list": {
            path: "/post/list",
            name: "post-list",
            query: {...searchValue.value}
        },
        "user": {
            path: "/user",
        },
        "pass": {
            path: "/pass/reset"
        },
        "home": {
            path: "/"
        }
    };
    activeIndex.value = key;
    router.push({...map[key]})
    console.log(key, keyPath)
}

const search = () => {
    let map = {
        "look": {
            path: "/post/look",
            name: "post-look",
            query: {...searchValue.value, lookTag: '1'}
        },
        "collect": {
            path: "/post/collect",
            name: "post-collect",
            query: {...searchValue.value, collectTag: '1'}
        },
        "list": {
            path: "/post/list",
            name: "post-list",
            query: {...searchValue.value}
        },
    };
    handleSelect(activeIndex.value)
    router.push({...map[activeIndex.value]})
}

const userLogout = () => {
    logout().then(({data})=>{
        if (data.code === 200) {
            ElMessage.success("用户退出登录成功！");
            localStorage.removeItem("token");
            router.push("/");
        }
    });
}
</script>

<style scoped>
.logo {
    font-size: 18px;
    font-weight: 500;
}

.flex-grow {
    flex-grow: 1;
}

.content {
}
</style>
